<template>
    <p class="event-item" :class="cssClasses" ref="eventItem" :style="event.cssStyle"
       @click="$emit('click', event, $event)" v-tooltip.top="{content: event.title, autoHide: false}">
        <slot name="fc-event-card" :event="event" v-if="showTitle">
            {{ event.title }}
        </slot>
    </p>

</template>

<script>
    //import moment from 'moment'

    export default {
        props: ['event', 'date', 'firstDay', 'events', 'size'],
        computed: {
            cssClasses () {
                let cssClasses = this.event.cssClass;
                if (!Array.isArray(cssClasses)) {
                    cssClasses = [cssClasses];
                } else {
                    cssClasses = Array.from(cssClasses);
                }

                if (this.start.isSame(this.date, 'day')) {
                    cssClasses.push('is-start');
                    let hasPrevious = false
                    for (let i=0; i<this.events.length; i++) {
                        let event = this.events[i]
                        if (moment(event.end).isSame(this.date, 'day')) {
                            hasPrevious = true
                        }
                    }
                    hasPrevious && cssClasses.push('has-previous');

                }

                if (this.end.isSame(this.date, 'day')) {
                    cssClasses.push('is-end');
                }

                if (! this.event.isShow) {
                    cssClasses.push('is-opacity');
                }
                return cssClasses.join(' ');
            },
            showTitle() {
                return (this.date.day() == this.firstDay || this.start.isSame(this.date, 'day'));
            },
            start () {
                return moment(this.event.start);
            },
            end () {
                return moment(this.event.end);
            }
        },
        mounted() {
            let h = 20
            if (this.size == 'small') {
                h = 14
            }
            let index = this.event.eventIndex ? this.event.eventIndex : 0
            this.$refs.eventItem.style.top =  h  * index + 'px'
        },
        watch:{
            date() {
                let h = 20
                if (this.size == 'small') {
                    h = 14
                }
                let index = this.event.eventIndex ? this.event.eventIndex : 0
                this.$refs.eventItem.style.top = 20 * index + 'px'
            }
        }
    }
</script>